Контекстні селектори
|
|
|
|
|
|
|||||||||
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|
Помилки |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Опис
При
створенні веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб
стилі для цих тегів використовувалися коректно, допоможуть селекторы, які
працюють тільки в певному контексті. Наприклад, задати стиль для тега <B>
тільки коли він розташовується усередині контейнера <P>. Таким чином
можна одночасно встановити стиль для окремого тега, а також для тега, який
знаходиться усередині іншого.
Синтаксис
E F
{ Опис правил стилю }
Тут
E це батьківський тег, а F - тег, розташований в контейнері <E>. В цьому
випадку стиль застосовуватиметься до тега <F>, коли дотримується
наступний код <E><F></F></E>. Не обов'язково мають бути
два теги, допускається довільний рівень вкладення. При цьому конструкція може
записуватися так: div div ul li {..}.
Приклад
HTML 4.0
CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251"> <title>Контекстні селекторы</title> <style type="text/css"> P B { font - family: Times, serif; /* Сімейство шрифту */ font - weight: bold; /* Жирне зображення */ color: navy; /* Синій колір тексту */ } </style> </head> <body> <div><b>Жирне зображення тексту</b></div> <p><b>Одночасно жирне зображення тексту і виділене кольором</b></p> </body></html>
У
цьому прикладі показано звичайне застосування тега <B> і цього ж тега,
коли він вкладений всередину абзацу <P>. При цьому міняється колір і
шрифт тексту, як показано на мал. 1.
Мал. 1. Використання контекстних селекторів
Браузери
У
браузері Internet Explorer версії 6 і нижче не працює комбінація контекстних
селекторів і псевдокласу hover. Наприклад, стиль для селекторів P B : hover або
A: hover SPAN застосовуватися не буде.
